<template>
<div class="comment-container">
  <div class="comment-header">
    <div class="header-imager">
      <img :src="comment.icon" alt="">
    </div>
    <div class="header-user">
      <span>{{comment.name}}</span>
      <van-rate class="rate" v-model="comment.rate" size="12" readonly/>
    </div>
    <div class="time">
      <span>{{comment.time}}</span>
    </div>
  </div>
  <div class="comment-body">
    <div class="body-text">
      <span>{{comment.text}}</span>
    </div>
    <div class="body-image">
      <img :src="item" v-for="(item,index) in comment.images" :key="index" alt="">
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
interface IComment{
  id:number,
  name:string,
  icon:string,
  rate:number,
  time:string,
  text:string,
  images:[]
}
defineProps<{
  comment:IComment
}>()
</script>

<style scoped lang="less">
.comment-container{
  background: #fff;
  .comment-header{
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    .header-imager{
      img{
        width: 40px;
        height: 40px;
      }
    }
    .header-user{
      padding-left: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      span{
        font-size: 15px;
      }
    }
    .time{
      flex: 1;
      display: flex;
      justify-content: flex-end;
      span{
        font-size:13px;
        color: #999;
        padding-top: 5px;
      }
    }
  }
  .comment-body{
    padding:0 10px 10px 50px;
    .body-text{
      font-size: 14px;
    }
    .body-image{
      margin-top: 5px;
      img{
        width:50px;
        margin-right: 10px;
      }
    }
  }
}
</style>